<!--主页面-->
<template>
	<div class="MyContainer">
		<div class="common-layout">
      <el-container>
        <!-- 左边布局 -->
        <el-aside width="200px">
          <!-- 上传头像 -->
          <div class="info">
						<div class="info-image" @click="showDialog">
							<el-avatar :size="100" :src="myObj.value_avater" />
							<span class="info-edit">
								<i class="el-icon-lx-camerafill"></i>
							</span>
						</div>
            <div class="info-name">{{ name }}</div>
					</div>
          <!-- 裁剪 上传 -->
		      <el-dialog title="裁剪图片" v-model="dialogVisible" width="600px">
            <div class="block">
              <div class="flex justify-center items-center">
                <div class="bg-purple-300 w-[300px] h-[300px] flex justify-center items-center">
                  <img v-bind:src="imgSrc" />
                </div> 
              </div>

              <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                action="http://47.113.217.179:8080/upload"
                multiple
                name = "img"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="onSuccess"
                :before-remove="beforeRemove"
                :limit="3"
                :on-exceed="handleExceed"
              >
              <div class="footBox">
                <el-button type="primary">选择图片并上传</el-button>
                <el-tag class="mt-[7px]">
                  jpg/png files with a size less than 500KB.
                </el-tag>
              </div>
              </el-upload>
            </div>
		      </el-dialog>
        </el-aside>
        <!-- 右边布局 -->
        <el-main>
          <el-descriptions title="个人信息" direction="vertical" :column="2" border>

            <el-descriptions-item label="姓名">
              <el-input v-model="myObj.value_name" placeholder="请输入内容"></el-input>
            </el-descriptions-item>
            
            <el-descriptions-item label="性别">
              <el-select v-model="myObj.value_sex" class="m-2" placeholder="请选择性别">
                <el-option v-for="item in options"
                          :key="item.value_sex"
                          :label="item.label"
                          :value="item.value_sex"/>
              </el-select>
            </el-descriptions-item>
    
            <el-descriptions-item label="年龄">
              <el-input v-model="myObj.value_age" placeholder="请输入内容"/>
            </el-descriptions-item>
    
            <el-descriptions-item label="联系电话">
              <el-input v-model="myObj.value_phone" placeholder="请输入内容" />
            </el-descriptions-item>
    
            <el-descriptions-item label="身份证号">
              <el-input v-model="myObj.value_id" placeholder="请输入内容" />
            </el-descriptions-item>
    
            <el-descriptions-item label="所属医院">
              <el-input v-model="myObj.value_hos" placeholder="请输入内容" />
            </el-descriptions-item>
    
            <el-descriptions-item label="职务级别">
              <el-input v-model="myObj.value_lev" placeholder="请输入内容" />
            </el-descriptions-item>
    
            <el-descriptions-item label="一级科室">
              <el-input v-model="myObj.value_Fir" placeholder="请输入内容" />
            </el-descriptions-item>
    
            <el-descriptions-item label="二级科室">
              <el-input v-model="myObj.value_Sec" placeholder="请输入内容" />
            </el-descriptions-item>
    
            <el-descriptions-item label="特长">
              <el-input v-model="myObj.value_fav" placeholder="请输入内容" />
            </el-descriptions-item>
    
            <el-descriptions-item label="备注">
              <el-input v-model="myObj.value_other" :rows="2" type="textarea" placeholder="请输入内容"/>
            </el-descriptions-item>
          </el-descriptions>

          <el-row class="mb-4" justify="center">
            <el-button type="primary" size="large" @click="saveInfo">保存信息</el-button>
          </el-row>

        </el-main> 
      </el-container>
    </div>
	</div>
</template>

<script setup lang="ts">
import { reactive,ref, watch } from 'vue';
import { ElMessage,ElMessageBox} from 'element-plus'
import { getDoctorInfo , saveDocInfo } from '../api/manager.js'
import { useGlobleStore } from '../store/globle';
import store from '../store/store';
import type { UploadProps, UploadUserFile } from 'element-plus'

const globle = useGlobleStore()
const options = [{value_sex: '男',label: '男',},{value_sex: '女',label: '女',},]
const name = globle.getUsrname();//登录名
const fileList = ref<UploadUserFile[]>([])

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfert of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  )
}

//个人信息
const myObj = reactive({
  value_name: '',//姓名
  value_age: 0,//年龄
  value_phone: '',//电话号码
  value_id :'',//身份证号
  value_hos:'',//所属医院
  value_lev:'',//职务级别
  value_Fir:'',//一级科室
  value_Sec:'',//二级科室
  value_fav:'',//特长 
  value_other:'',//备注
  value_sex:'',// 选择性别
  value_avater:'',
  id:''
})

//获取医生信息
getDoctorInfo().then(res =>{
  if(res.code == 200){//获取成功
    let response = res.data;//获取data数据
    myObj.id = response.docId
    myObj.value_name = response.docName
    myObj.value_age = response.docOld
    myObj.value_phone = response.docPhonenum
    myObj.value_id = response.docIdentification
    myObj.value_hos = response.docHospital
    myObj.value_lev = response.docDegree
    myObj.value_Fir = response.docDepartment
    myObj.value_Sec = response.docSecdepartment
    myObj.value_fav = response.docSpeciality
    myObj.value_other = response.docRemark
    myObj.value_sex = response.docGender
    myObj.value_avater = response.avatar
  }
})
.catch(err=>{
  console.log("获取失败",err)
})

//Begin Img
const imgSrc = ref('');
const dialogVisible = ref(false);

const showDialog = () => {
	dialogVisible.value = true;
	imgSrc.value = myObj.value_avater;
};

const onSuccess = (res) => {
  if(res.code===200){
    ElMessage({
      type:'success',
      message:'上传成功'
    })
    imgSrc.value = res.data
    myObj.value_avater = res.data
    //回传信息
    saveInfo()
    //保存图片
    globle.setAvater(myObj.value_avater)
    store.dispatch('asyncupdateIOTTagConfig',myObj.value_avater)
  }
}
//END Img

//Begin Text
const saveInfo = () =>{
  var save = {
    "docId":myObj.id,
    "docName":myObj.value_name,
    "docHospital":myObj.value_hos,
    "docDepartment":myObj.value_Fir,
    "docPhonenum":myObj.value_phone,
    "docSecdepartment":myObj.value_Sec,
    "docGender":myObj.value_sex,
    "docSpeciality":myObj.value_fav,
    "docOld":myObj.value_age,
    "docIdentification":myObj.value_id,
    "docDegree":myObj.value_lev,
    "docRemark":myObj.value_other,
    "avatar":myObj.value_avater
  }
  saveDocInfo(save).then(res=>{
    console.log("保存信息：",res)
  }).catch(err=>{
    console.log("err:",err)
  })
}
</script>

<style scoped>
.upload-demo{
  width: -webkit-fill-available;
  display: grid;
}
.footBox{
  display: flex;
  margin-top:30px;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
  width:100%;
}
.info {
	text-align: center;
	padding: 35px 0;
}
.info-image {
	position: relative;
	margin: auto;
	width: 100px;
	height: 100px;
	background: #f8f8f8;
	border: 1px solid #eee;
	border-radius: 50px;
	overflow: hidden;
}
.info-edit {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.info-edit i {
	color: #eee;
	font-size: 25px;
}
.info-image:hover .info-edit {
	opacity: 1;
}
.info-name {
	margin: 15px 0 10px;
	font-size: 24px;
	font-weight: 500;
	color: #060606;
}
.crop-demo-btn {
	position: relative;
}
.crop-input {
	position: absolute;
	width: 100px;
	height: 40px;
	left: 0;
	top: 0;
	opacity: 0;
	cursor: pointer;
}
</style>
